<template>
	<app-layout>
		<view class="mine tn-safe-area-inset-bottom">
			<!-- 顶部自定义导航 -->
			<tn-nav-bar>请假外出</tn-nav-bar>
			<view class="about__wrap" :style="{paddingTop: vuex_custom_bar_height + 'px'}">

				<!-- 我的信息  查看-->
				<view class=" tn-padding-bottom-xl tn-bg-white">
					<block>
						<view class="tn-padding ">
							<tn-form :labelWidth="150" :model="form" ref="uForm" :errorType="['message']">
								<tn-form-item label="请假类别" prop="qingjialeitext" :required="true">
									<view >{{typelist[0].details}}</view>
									<!-- <tn-select labelName="details" valueName="num" v-model="typeShow" :list="typelist"
										@confirm="typeconfirm"></tn-select> -->
								</tn-form-item>
								<tn-form-item label="请假原因" prop="qingjiayy" :required="true">
									<tn-input v-model="form.qingjiayy" type="textarea" :height="100"
										placeholder='请输入请假原因' />
								</tn-form-item>
								<tn-form-item label="外出地" prop="pcaeraname" :required="true">
									<tn-input v-model="form.pcaeraname" type="select" :selectOpen="dqShow"
										placeholder='外出地' @click="dqShow = true" />
									<tn-picker mode="region" v-model="dqShow" @confirm="dqconfirm"></tn-picker>
								</tn-form-item>
								<tn-form-item label="详细地址" prop="xz" :required="true">
									<tn-input v-model="form.xz" type="textarea" :height="100" placeholder='详细地址' />
								</tn-form-item>
								<tn-form-item label="可有同行" prop="issxtext" :required="true">
									<tn-input v-model="form.issxtext" type="select" :selectOpen="issxShow"
										placeholder='选择可有同行' @click="issxShow = true" />
									<tn-select labelName="name" valueName="id" v-model="issxShow" :list="issxlist"
										@confirm="issxconfirm" ></tn-select>
								</tn-form-item>
								<template v-if="form.issx">
									<tn-form-item label="同行人员" prop="retinue" :required="true">
										<tn-input :maxLength="7" v-model="form.retinue" type="text" placeholder="请输入姓名"></tn-input>
									</tn-form-item>
									<tn-form-item label="联系电话" prop="tel" :required="true">
										<tn-input :max-length="11" v-model="form.tel" type="number"
											placeholder="请输入手机号码"></tn-input>
									</tn-form-item>
								</template>
								<tn-form-item label="开始时间" prop="qingjiaks" :required="true">
									<tn-input v-model="form.qingjiaks" type="select" :selectOpen="timestartShow"
										placeholder='选择开始时间' @click="timestartShow = true" />
									<tn-picker mode="time" v-model="timestartShow"
										@confirm="timeSelect($event,'qingjiaks')"></tn-picker>
								</tn-form-item>

								<tn-form-item label="结束时间" prop="qingjiajs" :required="true">
									<tn-input v-model="form.qingjiajs" type="select" :selectOpen="timeendShow"
										placeholder='选择结束时间' @click="timeendShow = true" />
									<tn-picker mode="time" v-model="timeendShow"
										@confirm="timeSelect($event,'qingjiajs')"></tn-picker>
								</tn-form-item>
						
							</tn-form>

						</view>

					</block>
				</view>
			</view>

			<bottom-btn @save="save" @submit="submit"></bottom-btn>

			<view class='tn-tabbar-height'></view>

		</view>
	</app-layout>
</template>

<script>
	import locationmixin from '@/libs/mixin/location_mixin.js'
	export default {
		name: 'leaveadd',
		mixins: [locationmixin],
		data() {
			return {
				show: false,
				timestartShow: false,
				timeendShow: false,
				dqShow: false,
				address: '',
				typeShow: false,
				type: '',
				
				issxShow:false,

				typelist: [],
				
				issxlist: [{
					id: 1,
					name: '有'
				}, {
					id: 0,
					name: '无'
				}],
				issxtext:'',
				// 记录开始和结束时间的时间戳
				tqingjiaks: 0,
				tqingjiajs: 0,

				form: {
					mfid: '',
					issx: '',
					retinue: '',
					tel: '',
					pcaeraname: '',
					province: '',
					city: '',
					county: '',
					qingjiaks: '',
					qingjiajs: '',
					xz: '',
					qingjialei: '',
					qingjialeitext: '',
				},
				rules: {
					qingjialei: [{
						required: true,
						message: '请选择请假类型',
						trigger: 'blur,change'
					}],
					pcaeraname: [{
						required: true,
						message: '请选择外出地',
						trigger: 'blur,change'
					}],
					xz: [{
						required: true,
						message: '请输入详址',
						trigger: 'blur,change'
					}],
					qingjiajs: [{
						required: true,
						message: '请选择请假开始时间',
						trigger: 'blur,change'
					}],
					qingjiaks: [{
						required: true,
						message: '请选择请假结束时间',
						trigger: 'blur,change'
					}],
					qingjiayy: [{
						required: true,
						message: '请输入请假原因',
						trigger: 'blur,change'
					}],
					issxtext: [{
						required: true,
						message: '请选择可有同行',
						trigger: 'blur,change'
					}],
					
					retinue: [{
							required: true,
							message: '请输入中文姓名',
							trigger: 'blur,change'
						},
						{
							validator: (rule, value, callback) => {
								return this.$t.test.chinese(value);
							},
							message: '请输入中文姓名',
							trigger: ['change', 'blur'],
						}
					],
					tel: [{
							required: true,
							message: '请输入随行人员的手机号码',
							trigger: 'blur,change'
						},
						{
							validator: (rule, value, callback) => {
								return this.$t.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					],

				}

			}
		},
		onLoad(options) {
			let t = this;
			this.form.mfid = options.mfid ? options.mfid : this.form.mfid;
			if (!this.form.mfid) {
				uni.showModal({
					title: '提示',
					content: '用户ID不存在，请稍后再试',
					showCancel: false,
					success() {
						t.goBack()
					}
				})
			}
			this.gettypelist()
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			save() {

			},
			submit() {
				let t = this;
				this.form.qingjialei=this.typelist[0].num
				this.$refs.uForm.validate(valid => {
					if (valid) {
						// 验证通过
						console.log('验证通过')
						t.add()
					} else {
						// 验证失败
						console.log('验证失败')
					}
				})
			},
			add(param) {
				let t = this;
				this.$t.message.loading("提交中");
				this.$request({
					url: t.$api.leave.add,
					data: t.form,
					method: 'POST'
				}).then(response => {
					t.$t.message.closeLoading();
					if (response.code === 0) {
						let url = `/discoveryPages/leave/list?mfid=${t.form.mfid}`
						uni.showModal({
							title: '',
							content: response.msg,
							showCancel: false,
							success() {
								uni.redirectTo({
									url: url
								});
							}
						});
					} else {
						uni.showModal({
							title: '',
							content: response.msg,
							showCancel: false,
						});
					}
				}).catch((msg) => {
					t.$t.message.closeLoading();
				});
			},

			timeSelect(event, type) {
				let t = this;
				let result = `${event.year}-${event.month}-${event.day}`//${event.hour}:${event.minute}
				if (type == 'qingjiaks') {
					t.tqingjiaks = event.timestamp
					t.form.qingjiaks = result
				} else {
					t.tqingjiajs = event.timestamp
					t.form.qingjiajs = result
				}
				if (t.tqingjiajs != 0 && t.tqingjiajs < t.tqingjiaks) {
					t.$t.message.toast('结束时间不能大于开始时间')
					t.form.qingjiajs = ''
					t.tqingjiajs = 0
				}
			},

			dqconfirm(e) {
				this.form.province = e.province.label;
				this.form.city = e.city.label;
				this.form.county = e.area.label;
				this.form.pcaeraname = `${e.province.label}${e.city.label}${e.area.label}`
			},
			issxconfirm(e) {
				this.form.issxtext = e[0].label;
				this.form.issx = e[0].value;
			},

			typeconfirm(e) {
				this.form.qingjialei = e[0].value
				this.form.qingjialeitext = e[0].label
			},
			
			
			//获取检测种类
			gettypelist() {
				let t = this;
				this.$t.message.loading('加载中');
				this.$request({
					url: this.$api.common.typelist,
					data: {
						did: 21
					},
					method: 'POST'
				}).then(response => {
					this.$t.message.closeLoading();
					if (response.code === 0) {
						this.typelist = response.list;
						
					}
					this.$t.message.closeLoading();
				}).catch(err => {
					t.$t.message.toast(err)
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 15rpx;
	}

	.yx {
		padding: 0 20rpx;
		margin: 0 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
		border: 1rpx solid #555555;
		border-radius: 10rpx;
		height: 50rpx;
	}

	.nm {
		width: 150rpx;
		text-align: right;
		padding-right: 10px;
	}

	.ilkresult {
		display: flex;
		flex-direction: column;
		width: 100%;
		align-items: flex-end;
	}

	/* 底部安全边距 start*/
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
		height: calc(140rpx + constant(safe-area-inset-bottom));
	}


	.sign {
		width: 100%;
		height: 200rpx;
	}

	.photo {
		width: 100rpx;
		height: 120rpx;
		margin: 10rpx;
	}
</style>